<script >
// const sendMessage = ()=> {
//   const recipient = document.getElementById('recipient').value;
//   const message = document.getElementById('message-input').value;
//   chatSocket.send(JSON.stringify({
//     recipient: recipient,
//     message: message
//   }));
// }

// 流式数据请求
const startStream = ()=> {
  console.log("进来没")
  const eventSource = new EventSource('/stream/');
  eventSource.onmessage = function(e) {
    document.getElementById('stream-data').innerHTML += `<p>${e.data}</p>`;
  };
  eventSource.onerror = function() {
    eventSource.close();
  };
}

// WebSocket 连接
// const userId = "user1";  // 当前用户ID
// const chatSocket = new WebSocket(
//     `ws://127.0.0.1:8000/ws/chat/${userId}/`
// );
//
// chatSocket.onmessage = function(e) {
//   const data = JSON.parse(e.data);
//   document.getElementById('chat-messages').innerHTML += `<p><strong>${data.sender}:</strong> ${data.message}</p>`;
// };

</script>
<template>
  <!-- 聊天区域 -->
  <div>
    <h2>一对一聊天</h2>
    <div id="chat-messages"></div>
    <input type="text" id="recipient" placeholder="接收者ID">
    <input type="text" id="message-input">
    <div @click="sendMessage">发送</div>
  </div>

  <!-- 流式数据区域 -->
  <div>
    <h2>流式数据</h2>
    <div @click="start">开始流</div>
    <div id="stream-data"></div>
  </div>
</template>

<style scoped>

</style>
